<template>
<div class="shop  flex-column">
    <van-tabs v-model="active" title-active-color="#ea251c" line-width="50%" line-height="2px" @change="tabChange">
        <van-tab title="渠道商" :name="0"></van-tab>
        <van-tab title="授权经销商" :name="1"></van-tab>
    </van-tabs>
    <!-- <van-swipe class="my-swipe flex-1" ref="vanSuipe" :loop="false" :show-indicators="false" @change="swipeChange">
        <van-swipe-item>
            1
        </van-swipe-item>
        <van-swipe-item>
            <van-list
                class="flex-1 van-list-box overflow-y"
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
                    <div class="top-brand pl20 pr20 flex-wrap">
                        <div v-for="(item, i) in 14" :key="i" class="img-box">
                            <van-image
                                class="brnad-img"
                                fit="contain"
                                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                lazy-load
                            />
                        </div>
                    </div>
                    <div class="shop-box">
                        <div class="item flex-center-space-between" v-for="(item, index) in list" :key="index">
                            <div class="shop-box-data flex-1 flex-center">
                                <img src="" alt="">
                                <div class="msg flex-1 flex-column-space-between text-left pl20 height-70 pr20">
                                    <div class="fz-15 blod name">
                                        山海特服欧智能有限公司
                                    </div>
                                    <span class="text-gray fz-12 mt6">经营品牌：SFk</span>
                                    <div class="tag flex-center-space-between">
                                        <van-tag :type="typeMode(item.type)[0]" class="tag-" plain>{{ typeMode(item.type)[1] }}</van-tag>

                                        <van-button to="/shop" type="warning" icon="shop-o" class="tag-" size="mini" plain>进店逛逛</van-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </van-list>
        </van-swipe-item>
    </van-swipe> -->
    <div class="flex-1 overflow-y">

        <div class="shop-box">
            <div class="item flex-center-space-between" v-for="(item, index) in list" :key="index">
                <div class="shop-box-data flex-1 flex-center">
                    <van-image
                        class="height-60 width-60"
                        fit="contain"
                        :src="item.logo"
                        lazy-load
                    />
                    <div class="msg flex-1 flex-column-space-between text-left pl20 height-70 pr20">
                        <div class="fz-15 blod name">
                            {{ item.name }}
                        </div>
                        <span class="text-gray fz-12 mt6">经营品牌：<span v-for="(item, i) in item.brand_list" :key="i">{{ item.name }}、</span></span>
                        <div class="tag flex-center-space-between">
                            <div>
                                <ltd-level :uid="+item.uid" :ltd_level="item.ltd_level" />
                            </div>
                            <!-- <van-tag :type="typeMode(item.ltd_level)[0]" class="tag-" plain>{{ typeMode(item.ltd_level)[1] }}</van-tag> -->

                            <van-button :to="`/shop?id=${item.id}`" type="warning" icon="shop-o" class="tag-" size="mini" plain>进店逛逛</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</template>

<script>
import ltdLevel from '@/components/ltd-level.vue'
export default {
  components: { ltdLevel },
    data () {
        return  {
            src: 'https://img01.yzcdn.cn/vant/cat.jpeg',
            
            active: 1,
            loading: false, // 是否正在加载
            finished: false,  // 是否加载完所有数据， true 表示不在加载更多数据

            list: [
                // { tit: '山海特服欧智能有限公司', brand: 'SKF', ltd_level: 0 },
                // { tit: '山海特服欧智能有限公司', brand: 'SKF', ltd_level: 1 },
                // { tit: '山海特服欧智能有限公司', brand: 'SKF', ltd_level: 2 },
                // { tit: '山海特服欧智能有限公司', brand: 'SKF', ltd_level: 3 }
            ]
        }
    },
    watch: {
        active: {
            handler: function (val) {
                // this.$nextTick(function() {
                //     this.$refs.vanSuipe.swipeTo(val)
                // })
                this.getStoreList()
            },
            immediate: true
        }
    },
    methods: {
        tabChange (index) {

            // this.$refs.vanSuipe.swipeTo(index)
        },
        swipeChange (index) {
            this.active = index
        },
        // 加载更多
        onLoad () {
            console.log('onLoad')
            let time = setTimeout(() => {
                clearTimeout(time)
                this.list.push({ tit: '山海特服欧智能有限公司', brand: 'SKF', type: 3 })
                this.loading = false
                if (this.list.length >= 6) this.finished = true
            }, 2000)
        },
        getStoreList () {
            this.$home.managerLists({ ltd_level: this.active }).then(res => {
                console.log(res)
                this.list = res.data.list
            })
        },

        typeMode (v) {
            switch (v) {
                case 0:
                    return ['danger', '渠道商']
                case 1:
                    return ['primary', '授权经销商']
                case 2:
                    return ['success', '生产厂家']
                case 3:
                    return ['primary', '自营']
            }
        }
    }
}
</script>

<style lang="less" scoped>
.brnad-img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    margin-right: 18px;
}
.img-box {
    &:nth-child(4n + 4) {
        .brnad-img {
            margin-right: 0;
        }
    }
}

.van-list-box {
    height: 100%;
}

.item {
    height: 90px;
    background-color: #fff;
    .checkbox {
        width: 40px
    }
    .shop-box-data {
        padding-left: 20px;
        img {
            height: 60px;
            min-width: 60px;
            width: 60px;
            object-fit: contain;
        }
    }
    .tag- {
        border-radius: 4px;
        margin-right: 10px;
    }
}
</style>
